/**
 *  弹出层方法 依赖jQuery bootstrap5
 */
var layer = new function() {
	this.alert = function(msg, type) {
		type = type == null? "alert-success":"alert-"+type;
		var modalId = "alertModal";
		var html =
			`<div class="modal fade" id=${modalId} tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
			  		<div class="modal-dialog modal-sm">
			  			<div class="alert ${type} text-center" role="alert">
			  				 ${msg}
			  			</div>
			  		</div>
			  	</div>`;
		$("body").append(html);
		var modal = new bootstrap.Modal('#' + modalId);
		modal.show();

		$('#' + modalId).on('hidden.bs.modal', function() {
			$(this).remove()
		});
		return modal;
	}

	this.confirm = function(title, fn1, fn2) {
		var modalId = "confirmModal";
		var html =
			`<div class="modal fade" id=${modalId} tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
			  		<div class="modal-dialog modal-sm">
			  			<div class="modal-content">
			  				<div class="modal-body">${title}</div>
			  				<div class="modal-footer">
			  					<button type="button" class="btn btn-secondary btn-sm" data-type="cancel">取消</button>
			  					<button type="button" class="btn btn-primary btn-sm" data-type="confirm">确定</button>
			  				<div>
			  			<div>
			  		</div>
			  	</div>`;
		$("body").append(html);
		var modal = new bootstrap.Modal('#' + modalId);
		modal.show();
		$('#' + modalId).on('hidden.bs.modal', function() {
			$(this).remove()
		});
		$("#" + modalId).find("button[data-type='confirm']").click(function() {
			modal.hide();
			fn1 && fn1();
		});
		$("#" + modalId).find("button[data-type='cancel']").click(function() {
			modal.hide();
			fn2 && fn2();
		});
		return modal;
	}

	this.dialog = function(title, content, size) {
		var size = size == null ? '' : 'modal-' + size;
		var modalId = "diaologModal";
		var html =
			`<div class="modal fade" data-bs-backdrop="static" modal-dialog-scrollable id=${modalId} tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
			  		<div class="modal-dialog ${size}">
			  			<div class="modal-content">
			  			    <div class="modal-header">
						        <h5 class="modal-title">${title}</h5>
						        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						    </div>
			  				<div class="modal-body">${content}</div>
			  			<div>
			  		</div>
		  		</div>`;
		$("body").append(html);
		var modal = new bootstrap.Modal('#' + modalId);
		modal.show();
		$('#' + modalId).on('hidden.bs.modal', function() {
			$(this).remove();
		});
		return modal;
	}
	
	/**
	 * @param slide代表划出动作， start，end，top，bottom 分别代表左、右、上、下划入
	 */
	this.drawer = function(title, content, slide,size) {
		var styleSize = null;
		if(slide=='top' || slide=='bottom '){
			switch(size){
				case 'sm':styleSize="height: 100px";break;
				case 'lg':styleSize="height: 500px";break;
				case 'xl':styleSize="height: 800px";break;
				default:styleSize="height: 300px";break;
			}
		}else{
			switch(size){
				case 'sm':styleSize="width: 300px";break;
				case 'lg':styleSize="width: 800px";break;
				case 'xl':styleSize="width: 1140px";break;
				default:styleSize="width: 500px";break;
			}
		}
		var slide = slide == null ? 'offcanvas-end' : 'offcanvas-' + slide;
		var drawerId = "drawerOffcanvas";
		var html =
			`<div class="offcanvas ${slide}" tabindex="-1" style="${styleSize}"  id=${drawerId} aria-labelledby="offcanvasLabel" aria-hidden="true">
				  <div class="offcanvas-header">
				    <h5 class="offcanvas-title" id="offcanvasLabel">${title}</h5>
				    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
				  </div>
				  <div class="offcanvas-body">
				    ${content}
				  </div>
			</div>`;
		$("body").append(html);
		var drawer = new bootstrap.Offcanvas('#' + drawerId);
		drawer.show();
		$('#' + drawerId).on('hidden.bs.offcanvas', function() {
			$(this).remove();
		});
		return drawer;
	}
}

export default layer;